@import './base.less';
body {
  background-color: #f1f5f6;
}
//顶部固定区域
.top {
  position: fixed;
  top: 0vw !important;
  left: 0vw !important;
  z-index: 999;
  height: 11.733333vw;
  width: 100%;
  background-color: rgb(194, 20, 1);
  text-align: center;
  .top_title {
    font-size: 4.266667vw;
    font-weight: 700;
    line-height: 11.733333vw;
    color: #fff;
  }
}
//搜索区域
.serceh {
  margin-top: 11.733333vw;
  padding: 2.666667vw;
  width: 100%;
  height: 13.333333vw;
  .input {
    padding-left: 1.333333vw;
    width: 94.666667vw;
    height: 8vw;
    border-radius: 4vw;
    line-height: 8vw;
    background-color: #fff;
    .iconfont {
      margin-right: 1.333333vw;
      font-size: 3.2vw;
      color: #999;
    }
    span {
      font-size: 3.466667vw;
      color: #999;
    }
  }
}

//轮播图
.diy-banner {
  width: 100%;
  height: 49.066667vw;
  // background-color: pink;
  // 小圆点
  // .piont {
  //   position: relative;
  // }
  // ul {
  //   display: flex;
  //   position: absolute;
  //   bottom: 2.666667vw;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  //   li {
  //     margin-left: 0.8vw;
  //     width: 2.133333vw;
  //     height: 2.133333vw;
  //     border-radius: 50%;
  //     background-color: rgb(71, 172, 197);
  //   }
  //   .active {
  //     background-color: #313131;
  //   }
  // }
  .swiper-pagination-bullet {
    background-color: rgb(71, 172, 197);
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background-color: black;
  }
}
//新闻栏
.news {
  overflow: hidden;
  position: relative;
  display: flex;
  width: 100%;
  height: 7.733333vw;
  background-color: #525252;
  .laba {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 900;
    height: 7.733333vw;
    width: 9vw;
    text-align: center;
    line-height: 7.733333vw;
    background-color: #525252;
    .iconfont {
      font-size: 4.533333vw;
      color: #fff;
    }
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 900;
    height: 7.733333vw;
    width: 4vw;
    background-color: #525252;
  }
  .newtex {
    width: 71.466667vw;
    text-align: right;
    font-size: 3.733333vw;
    line-height: 7.733333vw;
    color: #fff;
    animation: move 5s linear infinite;
  }
}
@keyframes move {
  0% {
    transform: translate(100%);
  }

  100% {
    transform: translate(-100%);
  }
}
//导航栏
.nav {
  padding-top: 2.133333vw;
  width: 100%;
  height: 46.133333vw;
  background-color: #fff;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-bottom: 5.333333vw;
      width: 20vw;
      height: 16vw;
      text-align: center;
      img {
        margin-bottom: 1.333333vw;
        width: 11.733333vw;
        height: 11.733333vw;
      }
      .tex {
        font-size: 3.466667vw;
      }
    }
  }
}

//主会场图片
.zhuhc {
  width: 100%;
  height: 31.466667vw;
}

//猜你喜欢
.guss {
  width: 100%;
  height: 8vw;
  text-align: center;
  line-height: 8vw;
  background-color: #fff;
  p {
    font-size: 3.733333vw;
    color: #303133;
  }
}

//商品
.goods {
  margin-bottom: 13.333333vw;
  ul {
    margin-bottom: 1.333333vw;
    li {
      display: flex;
      justify-content: space-between;
      margin-top: 0.266667vw;
      padding: 2.666667vw;
      width: 100%;
      height: 37.333333vw;
      background-color: #fff;
      .left {
        width: 32vw;
        height: 32vw;
      }
      .right {
        height: 32vw;
        width: 56vw;
        h5 {
          font-weight: normal;
        }
        span {
          display: block;
          margin: 2.133333vw 0 2.133333vw;
          font-size: 3.2vw;
          color: #999;
        }
        .price {
          display: flex;
          font-size: 4vw;
          color: #f03c3c;
          i {
            margin-left: 1.333333vw;
            font-size: 3.2vw;
            text-decoration: line-through;
            color: #999;
          }
        }
      }
    }
  }
}

//底部快捷导航
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 13.333333vw;
  border-top: 1px solid #f1f5f6;
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    text-align: center;
    li {
      margin-top: 1.333333vw;
      // height: 13.333333vw;
      .iconfont {
        font-size: 6.4vw;
      }
      p {
        margin-top: 1.333333vw;
        font-size: 3.2vw;
      }
    }
    .active {
      color: #fa2209;
    }
  }
}

